 <template>
 	<view :data-theme="themeStyle">
 		<mescroll-uni @getData="getData" class="member-point" top="20">
 			<view slot="list">
 				<view class="account-box ns-bg-color" :style="'background-image:url(' + $util.img('upload/uniapp/point/head_bg.png') + ');background-repeat: no-repeat;background-position: bottom right; background-size: 150rpx;'">
 					<view class="account-text">
 						<text class="iconfont iconmn_jifen_fill"></text>
 						<text class="point">{{ memberAccount.provision_money ? (memberAccount.provision_money) : 0 }}</text>
 					</view>
					<view class="rule-text">
						<text class="rule-guize" @click="openRule">使用规则</text>
					</view>
					
					<view @touchmove.stop>
						<uni-popup ref="registerPopup" type="center" class="wap-floating">
							<view class="conten-box">
								<view class="title ns-text-color">{{ regisiterAgreement.title }}</view>
								<view class="con">
									<rich-text :nodes="regisiterAgreement.content"></rich-text>
								</view>
							</view>
						</uni-popup>
					</view>
 				</view>

 				<block v-if="dataList.length">
 					<view class="detailed-wrap">
 						<view class="cont">
 							<view class="detailed-item" v-for="(item, index) in dataList" :key="index">
 								<view class="info">
 									<view class="event">{{ item.type_name }}</view>
 									<view class="time-box">
 										<text class="time">{{ $util.timeStampTurnTime(item.create_time) }}</text>
 									</view>
 								</view>
 								<view class="num ns-text-color" v-if="item.account_data > 0">+{{ (item.account_data) }}</view>
 								<view class="num" v-else>{{ (item.account_data) }}</view>
 							</view>
 						</view>
 					</view>
 				</block>
 				<block v-else>
 					<view class="cart-empty"><ns-empty></ns-empty></view>
 				</block>
 			</view>
 		</mescroll-uni>
 		<loading-cover ref="loadingCover"></loading-cover>
 	</view>
 </template>
 <script>
 import globalConfig from '@/common/js/golbalConfig.js'
 export default {
 	data() {
 		return {
 			memberAccount: {
 				provision_money: 0
 			},
 			dataList: [],
			regisiterAgreement: {
				
				title: '',
				content: ''
			},
 		};
 	},
 	mixins:[globalConfig],
 	onShow() {
 		this.$langConfig.refresh();
 		if (!uni.getStorageSync('token')) {
 			this.$util.redirectTo(
 				'/pages/login/login/login',
 				{
 					back: '/otherpages/member/provision_money/provision_money'
 				},
 				'redirectTo'
 			);
 		}
 		this.getAccountInfo();
		this.getRgisterPopup();
 	},
 	methods: {
 		toList(){
 			this.$util.redirectTo('/promotionpages/point/list/list');
 		},
 		toOrderList(){
 			this.$util.redirectTo('/promotionpages/point/order_list/order_list');
 		},
 		//获取个人积分信息
 		getAccountInfo() {
 			this.$api.sendRequest({
 				url: '/api/memberaccount/info',
 				data: {
 					account_type: 'provision_money'
 				},
 				success: res => {
 					if (res.code == 0 && res.data) {
 						this.memberAccount = res.data;
 					} else {
 						this.$util.showToast({ title: res.message });
 					}
 				}
 			});
 		},
		// 展示使用规则
		openRule() {
				this.$refs.registerPopup.open();
		},
		
		//获取使用规则
		
		getRgisterPopup() {
			this.$api.sendRequest({
				url: '/api/member/provisionMoneyConfig',
				success: res => {
					if (res.code >= 0) {
						this.regisiterAgreement = res.data.value;
					}
				}
			});
		},
 		//获得列表数据
 		getData(mescroll) {
 			this.$api.sendRequest({
 				url: '/api/memberaccount/page',
 				data: {
 					page_size: mescroll.size,
 					page: mescroll.num,
 					account_type: 'provision_money'
 				},
 				success: res => {
 					let newArr = [];
 					let msg = res.message;
 					if (res.code == 0 && res.data) {
 						newArr = res.data.list;
 					} else {
 						this.$util.showToast({ title: msg });
 					}
 					mescroll.endSuccess(newArr.length);
 					//设置列表数据
 					if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
 					this.dataList = this.dataList.concat(newArr); //追加新数据
 					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
 				},
 				fail: res => {
 					mescroll.endErr();
 					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
 				}
 			});
 		}
 	}
 };
 </script>

 <style lang="scss">
	 // @import '../../pages/public/css/common.scss';
	 
 /deep/ .fixed{position: relative;top:0}
 .cart-empty{position:relative;top: 50%;margin-top: 104px !important;}
 
 .account-box {
 	width: 702rpx;
 	height: 211rpx;
 	margin: 0 auto;
 	border-radius: 20rpx;
 	padding: 20rpx;
 	box-sizing: border-box;

 	.accout-btn {
 		display: flex;
 		margin-top: 30rpx;
 		view {
 			width: 170rpx;
 			height: 44rpx;
 			border-radius: 22rpx;
 			border: 1px solid rgba(255,255,255,.4);
 			color: #fff;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			margin-right: 44rpx;
 		}
 	}

 	.account-text {
 		color: #fff;
 		font-size: 44rpx;
 		display: flex;
		float: left;
 		align-items: center;
 		margin-left: 10rpx;
 		text {
 			margin-right: 12rpx;
 		}
 	}
	.rule-text {
		color: #FFF;
		font-size: 15rpx;
		font-weight: bold;
		margin-top: 10rpx;
		float: right;
	}
	
	.conten-box {
		padding: 0 $ns-padding $ns-padding;
		
		.title {
			line-height: 100rpx;
			font-size: $ns-font-size-lg + 4rpx;
			font-weight: bold;
			border-bottom: 2rpx solid $ns-border-color-gray;
			margin-bottom: $ns-margin;
		}
		.con {
			width: 100%;
			min-height: 600rpx;
			overflow-y: scroll;
			text-align: left;
			text-indent: 50rpx;
		}
	}
	
 }
 .detailed-wrap {
 	background: #fff;
 	border-radius: 10rpx;
 	margin: 20rpx;
 	.head {
 		display: flex;
 		height: 90rpx;

 		& > view {
 			flex: 1;
 			text-align: left;
 			padding: 0 $ns-padding;
 			line-height: 90rpx;
 		}
 	}
 	.cont {
 		background: #fff;
 		width: 702rpx;
 		margin: 0 auto;

 		.detailed-item {
 			padding: 32rpx $ns-padding;
 			margin: 0 $ns-margin;
 			border-bottom: 1px solid #eee;
 			position: relative;
 			box-sizing: border-box;

 			&:last-of-type {
 				border-bottom: none;
 			}

 			.info {
 				padding-right: 180rpx;

 				.event {
 					font-weight: bold;
 					font-size: $ns-font-size-lg;
 					line-height: 1.3;
 					color: #333;
 				}
 				.time-box{
 					line-height: 1;
 					margin-top: 24rpx;
 				}

 				.time {
 					font-size: $ns-font-size-base;
 					color: $ns-text-color-gray;
 				}
 			}

 			.num {
 				width: 160rpx;
 				position: absolute;
 				right: 17rpx;
 				top: 50%;
 				transform: translateY(-50%);
 				text-align: right;
 				font-size: 40rpx;
 			}
 		}
 	}
 }
 </style>

